<template>
	<view :data-theme="theme">
		<view class="content">
			<view class="card" v-for="(item,index) in dataList" :key="index">
				<view style="position: relative;">
					<view class="column">
						<view class="title">
							活动名称:
						</view>
						<view class="title-c">
							{{item.name ? item.name : ' '}}
						</view>
					</view>
					<view class="column" :color="bgColor" :class="item.status == 1 ?'active_class':' '"
						style="position: absolute;right: 0;top: 0;padding: 6rpx;border-radius: 0 10rpx 0 16rpx;background-color: #f0f0f0;color: #8d8d8d;">
						{{statusFilter[item.status]}}
					</view>
					<view class="column">
						<view class="title">
							商品数量:
						</view>
						<view class="title-c">
							{{item.productNum}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							单次限购:
						</view>
						<view class="title-c">
							{{item.oneQuota ? item.oneQuota : '不限'}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							活动限购:
						</view>
						<view class="title-c">
							{{item.allQuota?item.allQuota:'不限'}}
						</view>
					</view>

					<view class="column">
						<view class="title">
							活动日期:
						</view>
						<view class="title-c">
							{{item.startDate}}<span style="margin: 0 6rpx;">至</span>{{item.endDate}}
						</view>
					</view>
					<view class="column">
						<view class="title">
							活动时间:
						</view>
						<view class="title-c"
							style="display: flex;flex-direction: column;justify-content: left;align-items: flex-start;">
							<view style="margin: 4rpx 0;" v-for="(ele,indexn) in item.timeList" :key="indexn">
								{{ele}}
							</view>
						</view>
					</view>

				</view>
				<view style="margin-top:10px;border-bottom: 1px solid #ddd"></view>
				<view class="footer-button">
					<view class="last_button" style="display: flex;justify-content: end;font-size: 24rpx;">
						<button v-if="item.status == '1'" style="margin-right:10px ; line-height: 57rpx;padding:0 30rpx;" class="plain_bgColor"
							plain="true" @click="toSeckillProChoose(item)">参与活动</button>
							<button v-if="item.status == '2'" style="margin-right:10px ; line-height: 57rpx;padding:0 30rpx;" class="plain_bgColor"
								plain="true" @click="toSeckillProChoose(item)">查看详情</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSeckillListAPi
	} from "@/api/marketing";
	import {
		setThemeColor
	} from "../../../../utils/setTheme";
	let app = getApp();
	export default {
		props: {
			// tab: {
			// 	type: [Object],
			// 	default: ''
			// },
			// bgColor: {
			// 	type: String,
			// 	default: 'bule'
			// },
			theme: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				bgColor: "#ffffff",
				orderParams: {
					limit: 10,
					page: 1,
				},
				dataList: [],
				totalPage: 1, //总页面数量
				loadMoreStatus: 'more', // 底部状态 noMore loading
				statusFilter: ['未开始', '进行中', '已结束']
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		created() {
			this.initData();
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.orderParams.page = 1;
				this.loadMoreStatus = 'more';

				this.getOrderList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.orderParams.page++;
				this.getOrderList(true);
			},
			toDetails(item) {
				this.$emit('toDetails', item);
			},
			// 搜索查询
			searchProduct(valueKey) {
				this.orderParams.page = 1;
				this.orderParams.name = valueKey;
				this.loadMoreStatus = 'more';
				this.getOrderList();
			},
			//时间查询
			calendarProduct(dates) {
				// console.log("查询日期：", dates[0], "-", dates[dates.length - 1]);
				this.orderParams.dateLimit = dates;
				this.loadMoreStatus = 'more';
				this.getOrderList()
			},
			// --------api------获取数据
			getOrderList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.orderParams.page = 1;
					this.loadMoreStatus = 'more';
				};
				getSeckillListAPi(this.orderParams).then((res) => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.list, that.dataList);
					} else {
						that.dataList = data.list;
					}
					that.totalPage = data.totalpage;
					if (data.totalPage == this.orderParams.page || data.totalPage == 0) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				})
			},
			toSeckillProChoose(item) {
				this.$emit('toSeckillProChoose', item)
			},
		}
	}
</script>

<style lang="scss">
	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $main-color-theme1;
	}

	.content {
		// margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 10rpx;
	}

	.cards {
		flex: 0 0 440rpx;
		border-radius: 20rpx;
		background-color: #fafafa;
		padding: 20rpx;
		margin-right: 20rpx;

		.card_text {
			display: -webkit-box; //（兼容性）
			-webkit-line-clamp: 1; //（指定显示行数）
			text-overflow: ellipsis; // (省略号）
			overflow: hidden; //（多余部分隐藏）
			margin: 20rpx 0;
			font-size: 28rpx;
			color: #000;
		}
	}
	
	.active_class{
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
	}

	.column {
		padding: 14rpx 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 130rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.footer-button {
		margin-top: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		padding-bottom: 20rpx;
	}
</style>